<template>
  <div class="mask" @click.self="$emit('hide')">
    <div class="con">
      <h3 class="specs">{{detail.specsname}}</h3>
      <div class="option">
        <span v-for="(item,index) in detail.specsattr" :key="item"  
        @click="n=index"
        :class="index==n? 'active':'' ">{{item}}</span>
      </div>
      <van-button color="#ff4400" @click="addshop" size="mini" block>加入购物车</van-button>
    </div>
  </div>
</template>

<script>

import {reqAddShop} from "../../../http/http";
export default {
  props: ["detail"],
  data() {
    return {
      n: 0,
    };
  },
  methods: {
      addshop(){
         reqAddShop({
             uid:JSON.parse(localStorage.getItem("userInfo")).uid,
             goodsid:this.detail.id,
             num:1
         }).then(res=>{
                if(res.data.code===200){
                    alert("添加成功")
                }else{
                    alert(res.data.msg)
                }
                this.$emit("hide")
          })
      }
  },
};
</script>

<style scoped>
.mask {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
}
.con {
  min-height: 50%;
  max-height: 80%;
  background: #fff;
  width: 100vw;
  position: absolute;
  left: 0;
  bottom: 0;
}
.specs {
  font-size: 0.5rem;
  font-weight: 900;
}
.option {
  overflow: hidden;
}
.option span {
  float: left;
  margin: 0.2rem;
  padding: 0.2rem 0.3rem;
  background: #ccc;
  border-radius: 0.1rem;
}
.option .active {
  background: #ff4400;
  color: #fff;
}
</style>